<template>
  <ul class="side-nav">
    <li v-for="(item, index) in lists" @click="selNav(index)" :class="index==navCheck ? 'checkedNav' : ''">
      {{item.n}}
    </li>
  </ul>
</template>

<script>
  export default{
    name:'sideNav',
    data(){
      return {
        navCheck:'',
        lists:[
          {n:'ccc',url:''},
          {n:'3123',url:''},
          {n:'asd',url:''},
          {n:'zxc',url:''},
          {n:'zxc',url:''},
          {n:'asd',url:''},
        ]
      }
    },
    methods:{
      selNav:function (index) {
        this.navCheck = index;
      }
    }
  }
</script>

<style scoped lang="less">
.side-nav{
  position: fixed;
  left:15vw;
  top:11vw;
  width:8vw;
  padding:0.8vw;
  border-radius: 5px;
  background: #000;
  li{
    color:#aaa;
    cursor: pointer;
    line-height:1.26vw;
    width:100%;
    text-align: center;
    &:hover{
      color:#fff;
    }
  }
  .checkedNav{
    background:linear-gradient(to bottom,  rgba(34,34,34,1) 0%,rgba(17,17,17,1) 100%);
    border-radius: 5px;
    color:#fff;
  }
}
</style>
